<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>造数工厂</title>
    <!-- 导入样式 -->
    <link
            rel="stylesheet"
            href="http://unpkg.com/element-plus/dist/index.css"
    />
    <!-- 导入 本地蒲公英背景js -->
    <script src="/js/main.js"></script>
    <!-- 导入 Vue 3 -->
    <script src="http://unpkg.com/vue@next"></script>
    <!-- 导入组件库 -->
    <script src="http://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/element-plus@2.1.10/dist/locale/zh-cn.js"></script>
    <!-- 导入 axios -->
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        html,body{
            height:100%;
            margin:0;
            padding:0;
        }
        .my-app {
            height: 90%;
            display: flex;
            justify-content: space-between;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            flex-direction: column;
            padding: 50px 50px 10px 50px;
        }
        .top-divider{
            background-color: rgba(226, 223, 223, 0.63);
            width: 100%;
        }
        .my-table {
            /*padding: 50px 0 0 0;*/
            /* box-shadow: 4px 2px 5px #ccc; */
            flex: 8;
            width: 90% !important;
        }
    
        .my-pagination {
            padding-top: 30px;
            width: 100%;
            display: flex;
        }
        .el-pagination{
            margin-left: auto;
        }
        .buttons {
            width: 100%;
            text-align: right;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div id="app" class="my-app">
    <!-- 查询 -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item v-for="item of items" :label="item.label">
            <el-input v-model="form[item.key]" :placeholder="`${item.placeholder}`"/>
        </el-form-item>
    </el-form>
    <div class="buttons">
        <el-button type="primary" @click="handleRun">执行</el-button>
        <el-button @click="handleQueryRecord">查询执行记录</el-button>
        <el-button @click="handleClearRecord">清除执行记录</el-button>
        <el-button @click="handleTips">操作说明</el-button>
    </div>
    <div class="top-divider" >
        <br/>
    </div>

    <!-- 表格 -->
    <el-table
            class="my-table"
            :data="tableData"
            style="width: 100%"
            height="500"
            stripe
            @selection-change="handleSelectionChange"
    >

        <el-table-column type="selection" width="55" :selectable="checkboxInit">
        </el-table-column>
        <el-table-column label="序号" width="80" type="index">
        </el-table-column>
        <el-table-column label="描述信息" prop="description" width="1050"></el-table-column>
        <el-table-column label="数据分类" prop="category"></el-table-column>
        <el-table-column label="执行次数" prop="run_num" width="120">
            <template #default="{ row }">
<!--                <el-input v-model="row.run_num"/>-->
                <el-input v-model="row.run_num" :placeholder="row.run_num_tips"/>
            </template>
        </el-table-column>
    </el-table>

    <!--  ====================================================================  -->
    <el-dialog
            v-model="dialogVisible"
            title=""
    >
        <!-- 替换到这里 -->
        <div
                title="提示"
                width="30%"
                v-if="dialogVisible"
                style="border: 5px blue;margin: 18px; width: 100%;">
            <el-table
                    :data="detailTableData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column label="描述信息" prop="description"></el-table-column>
                <el-table-column label="已完成次数" prop="finish_num" width="120"></template>
                </el-table-column>
            </el-table>
            <!--    <el-button @click="dialogVisible = false"  style="margin: 18px;">取 消</el-button>-->
            <!--        <el-button type="primary" @click="dialogVisible = false" style="margin: 18px;">确 定</el-button>-->
            </span>
        </div>

        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
        </template>
    </el-dialog>
    <!--  ====================================================================  -->
    <!--    <el-pagination-->
    <!--            background-->
    <!--            layout="prev, pager, next"-->
    <!--            :total="1000"-->
    <!--            @size-change="handleSizeChange"-->
    <!--    >-->
    <!--    </el-pagination>-->
    <div 
            class="my-pagination"
    >
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @prev-click="handlePrevClick"
            @next-click="handleNextClick"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next"
            :total="total"
            >
    </el-pagination>
    </div>
    

</div>

</body>
<script>
    const _axios = axios.create({
        baseURL: "http://192.168.2.102:8099/darker/task",
        timeout: 35000,
    });
</script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                tips: {
                    href: "/tips.html"
                },
                dialogVisible: false,
                items: [
                    {label: "对应服务器地址", key: "server_ip", placeholder: "http://192.168.2.53:80"},
                    {label: "数据标识", key: "named_pre", placeholder: "造数前缀，如User_"},
                    {label: "用户名", key: "user_name", placeholder: "系统登录账号"},
                    {label: "密码", key: "user_pwd", placeholder: "密码"},
                ],
                form: {},
                tableData: [{}],
                selection: [],
                currentPage: 1,
                pageSize: 10,
                total: 0
            };
        },
        methods: {
            handleTips(){
                window.open(this.tips.href, "_blank")
            },
            checkboxInit(row,index){
                 if(row.status === '0'){
                   return true;
                 }else{
                   return false;
                 }
               },
            handlePrevClick(val) {
                this.currentPage = val - 1;
                this.handleQueryIndex(this.currentPage, this.pageSize)
            },
            handleNextClick(val) {
                this.currentPage = val + 1;
                this.handleQueryIndex(this.currentPage, this.pageSize)
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.handleQueryIndex(this.currentPage, this.pageSize)
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.handleQueryIndex(this.currentPage, this.pageSize)
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            async handleQueryIndex1() {
                res = await _axios.get("task_info", {"params": {"page": 1, "limit": 10}});
                this.tableData =
                    res.data.data.list.map(item => ({...item}))
                // 总条数 = 页码数 * 每页数
                this.total = res.data.data.totalPage * this.pageSize;
                this.currentPage = res.data.data.page;
            },
            async handleQueryIndex(page, limit) {
                page = isNaN(page) ? this.currentPage : page;
                limit = limit || this.pageSize;
                res = await _axios.get("task_info", {"params": {"page": page, "limit": limit}});
                this.tableData =
                    res.data.data.list.map(item => ({...item}));

                if (res.data.code === 200) {
                    ElementPlus.ElMessage.success("查询成功");
                } else {
                    ElementPlus.ElMessage.error(res.data.msg);
                }
            },
            async handleRun() {
                res = await _axios.post("run_task", {...this.form, history: '0', data: this.selection});
                if (res.data.code === 200) {
                    ElementPlus.ElMessage.success("执行成功");
                } else {
                    ElementPlus.ElMessage.error(res.data.msg);
                }
            },
            handleQueryRecord() {
                _axios.post("run_record", {...this.form}).then(
                    (res) => {
                        this.detailTableData = res.data.data;
                        this.dialogVisible = true;
                    }
                );
                // ElementPlus.ElMessage.success("执行成功");
            },
            async handleClearRecord() {
                res = await _axios.delete("clear_record", {"data": {...this.form}});
                if (res.data.code === 200) {
                    ElementPlus.ElMessage.success("清除执行记录成功");
                } else {
                    ElementPlus.ElMessage.error(res.data.msg);
                }
            },
            handleSelectionChange(selection) {
                this.selection = selection;
            },
        },
        created() {
            this.handleQueryIndex1();

        },
    });
    app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
    app.mount("#app");
</script>

<script>
    !function () {

    function n(n, e, t) {

        return n.getAttribute(e) || t

    }

    function e(n) {

        return document.getElementsByTagName(n)

    }

    function t() {

        var t = e("script"), o = t.length, i = t[o - 1];

        return {

            l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "0,0,0"), n: n(i, "count", 99)

        }

    }

    function o() {

        a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,

            c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

    }

    function i() {

        r.clearRect(0, 0, a, c);

        var n, e, t, o, m, l;

        s.forEach(function (i, x) {

            for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],

            null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y,

                l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m),

                t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))

        }),

            x(i)

    }

    var a, c, u, m = document.createElement("canvas"),

        d = t(), l = "c_n" + d.l, r = m.getContext("2d"),

        x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

            function (n) {

                window.setTimeout(n, 1e3 / 45)

            },

        w = Math.random, y = {x: null, y: null, max: 2e4};
    m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0].appendChild(m), o(), window.onresize = o,

        window.onmousemove = function (n) {

            n = n || window.event, y.x = n.clientX, y.y = n.clientY

        },

        window.onmouseout = function () {

            y.x = null, y.y = null

        };

    for (var s = [], f = 0; d.n > f; f++) {

        var h = w() * a, g = w() * c, v = 2 * w() - 1, p = 2 * w() - 1;
        s.push({x: h, y: g, xa: v, ya: p, max: 6e3})

    }

    u = s.concat([y]),

        setTimeout(function () {
            i()
        }, 100)

}();
</script>
</html>

